<%--
  Created by IntelliJ IDEA.
  User: lenovo
  Date: 2019-07-08
  Time: 9:04
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page isELIgnored="true" %>
<%
    String pash = request.getContextPath();
    String basepash = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + pash + "/";
%>
<html>
<head>
    <base href="<%=basepash%>">
    <title>Title</title>
    <%@include file="/publs.jsp"%>
    <script>
        var cxk="<%=request.getContextPath()%>";
    </script>
</head>
<body>
<div id="root">
    <Row  style="margin-left:50px;margin-top: 10px;">
        <i-col>
            <i-form :label-width="80" :inline="true">
                <form-item label="订单号">
                 <i-input v-model="name2"></i-input>
                </form-item>
                <form-item label="购买人">
                    <i-input @on-change="onXingMing" @on-blur="onXingMings" v-model="name1"></i-input>
                </form-item>
                <form-item label="购买公司">
                    <i-select  v-model="name3" style="width: 120px">
                        <i-option :value="null">请选择</i-option>
                        <i-option v-for="item in selevalue" :value="item.userid">{{item.mendian}}</i-option>
                    </i-select>
                </form-item>
                <form-item label="进/退">
                    <i-select v-model="name4" style="width: 150px">
                        <i-option value="请选择">请选择</i-option>
                        <i-option value="购买">购买</i-option>
                        <i-option value="退货">退货</i-option>
                    </i-select>
                </form-item>
                <i-button @click="chaxunssada">查询</i-button>
                <i-button @click="value1 = true" type="primary">数量统计</i-button>
            </i-form>
        </i-col>
    </Row>


    <modal v-model="detailsModel" title="订单详情" width="850">
        <i-table :data="detailsData" :columns="detailsColumns"></i-table>
    </modal>


    <i-table style="margin: 20px" :data="orderData" :columns="orderColumns" @on-row-dblclick="searchDetails">
        <%--<template slot="operation" slot-scope="{row}">--%>
            <%--&lt;%&ndash;<i-button type="info" icon="md-search" @click="searchDetails(row)">查看详情</i-button>&ndash;%&gt;--%>
        <%--</template>--%>
    </i-table>

    <Drawer title="数量统计" :closable="false" v-model="value1">
        <p>销售:{{aaaaaaaaaaaaaa}}</p>
        <p>退货:{{bbbbbbbbbbbbbb}}</p>
    </Drawer>
</div>

<script>
    new Vue({
        el:"#root",
        data:{
            aaaaaaaaaaaaaa:0,
            bbbbbbbbbbbbbb:0,
            orderData:[],
            orderColumns:[
                {title:"编号",key:"id"},
                {title:"订单号",key:"orideridid"},
                {title:"购买人",key:"goumairen"},
                {title:"购买公司",key:"mendinans"},
                {title:"购买时间",key:"goumaishijian"},
                {title:"销售/退货",key:"types"},
                // {title:"操作",slot:"operation"}
            ],
            name1:"",
            name2:"",
            name3:"",
            name4:"",
            value1:false,
            selevalue:[],
            disabledsss:true,
            detailsModel:false,
            detailsData:[],
            detailsColumns: [
                {title:"编号",key:"id"},
                {title:"药品编号",key:"drugsid"},
                {title:"数量",key:"number"},
                {title:"价格/元",key:"price"},
                {title:"合计/元",render(h,{row}){
                    return h("span",row.number*row.price)
                    }},
                {title:"购买时间",key:"atime"}
            ]
        },
        methods:{
            searchAll(){
                let name1 = "";//购买人
                let name2 = "";//随机数
                let name3 = "";//购买公司id
                let name4 = "";//状态
                axios.get(`${cxk}/zOnInSearch/searchOrder?name1=${this.name1}&name2=${this.name2}&name3=${this.name3}&name4=${this.name4}`)
                    .then(({data})=>{
                        this.orderData = data.obj;
                        let a = 0;
                        let b = 0;
                        for (let i = 0; i < this.orderData.length; i++) {
                            console.log(this.orderData[i].types)
                            if(this.orderData[i].types=="购买"){
                                a++;
                            }else{
                                b++;
                            }
                        }
                        this.aaaaaaaaaaaaaa = a;
                        this.bbbbbbbbbbbbbb = b;
                    })
            },
            searchDetails(row){
                this.tetailsModel=true
                axios.post(`${cxk}/zOnInSearch/searchDetails?orderIds=${row.id}`)
                    .then(({data})=>{
                        this.detailsModel = true;
                        this.detailsData = data.obj;
                    })
            },
            chaxunssada(){
                this.searchAll();
            },
            seras(){
                axios.get("/kuhu/select?pageNo=0&pageSize=999999999&name=").then(({data})=>{
                    this.selevalue = data.obj.list;
                })
            },
            onXingMing(){
                this.selevalue = [];
            },
            onXingMings(){
                if(this.name1!=null||this.name1!=""){
                    this.disabledsss = true;
                    this.name3 = "";
                }
                this.seras();
            },
        },
        mounted(){
            this.seras();
            this.searchAll()
        }
    })
</script>
</body>
</html>
